import { Button, Card, Col, Input, Pagination, Row, Space, Table, Tag } from 'antd'
import moment from 'moment';
import React, { useState, useEffect } from 'react'
import PageBreadcrumb from '../../components/PageBreadcrumb'
import { getOrders } from "../../api/orders.js"
import EditOrders from './EditOrders';
import EditAddress from './EditAddress';
import ShowLogistics from './ShowLogistics';

const showTotal = (total) => `共 ${total} 条`;
const { Search } = Input;
const OrdersList = () => {
  const statusTag = (status) => {
    let color = ''
    let label = ''
    if (status === '1') {
      color = 'green'
      label = '已付款'
    } else {
      color = 'red'
      label = '未付款'
    }
    return <Tag color={color}>{label}</Tag>
  }
  const columns = [
    {
      title: '订单编号',
      dataIndex: 'order_number',
      key: 'order_number'
    },
    {
      title: '订单价格',
      key: 'order_price',
      dataIndex: 'order_price'
    },
    {
      title: '是否付款',
      key: 'pay_status',
      dataIndex: 'pay_status',
      render: (pay_status) => (
        <>
          {statusTag(pay_status)}
        </>

      ),
    },
    {
      title: '是否发货',
      key: 'is_send',
      dataIndex: 'is_send'
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      key: 'create_time',
      render: (create_time) => (
        <span>
          {
            moment(create_time).format("YYYY-MM-DD HH:MM:SS")
          }
        </span>
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button type='link' onClick={() => handleEditOrders(record)}>修改订单</Button>
          <Button type='link' onClick={() => handleEditAddress(record)}>修改地址</Button>
          <Button type='link' onClick={() => handleShowLog(record)}>物流信息</Button>
        </Space>
      ),
    },
  ];

  const [data, setData] = useState([])
  const [total, setTotal] = useState(0)
  const [loading, setLoading] = useState(false)
  const [queryInfo, setQueryInfo] = useState({
    type: 3,
    pagenum: 1, // 当前的页数
    pagesize: 10, // 当前每页显示多少条数据
  });
  const [isEditOrders, setIsEditOrders] = useState(false)
  const [isEditAddress, setIsEditAddress] = useState(false)
  const [isLog, setIsLog] = useState(false)
  const [orderInfo, setOrderInfo] = useState({})

  useEffect(() => {
    getListData()
  }, [queryInfo])

  // 查询列表
  const getListData = async () => {
    setLoading(true)
    const data = await getOrders(queryInfo).finally(() => {
      setLoading(false)
    });

    setData(data.goods)
    setTotal(data.total)
  };

  // 搜索
  const onSearch = (value) => {
    setQueryInfo({
      query: value,
      pagenum: 1,
      pagesize: 5
    })
  }

  // 监听页码值的改变
  const handlePagination = (page, pageSize) => {
    setQueryInfo({
      query: queryInfo.query,
      pagenum: page,
      pagesize: pageSize
    })
  }

  // 修改订单
  const handleEditOrders = (row) => {
    setIsEditOrders(true)
    setOrderInfo(row)
  };

  // 关闭修改订单弹框回调函数
  const hideEditOrders = (type) => {
    setIsEditOrders(false)
    setOrderInfo({})
    if (type) {
      getListData()
    }
  }

  // 修改地址
  const handleEditAddress = (row) => {
    setIsEditAddress(true)
    setOrderInfo(row)
  };

  // 关闭修改地址弹框回调函数
  const hideEditAddress = () => {
    setIsEditAddress(false)
    setOrderInfo({})
  }

  // 物流信息
  const handleShowLog = () => {
    setIsLog(true)
  };

  // 关闭物流信息弹框回调函数
  const hideShowLog = () => {
    setIsLog(false)
  }

  return (
    <>
      <PageBreadcrumb>
        <span>订单管理</span>
        <span>订单列表</span>
      </PageBreadcrumb>

      <Card>
        <Row>
          <Col>
            <Search placeholder="请输入内容" onSearch={onSearch} style={{ width: 300 }} />
          </Col>
        </Row>

        <Table
          rowKey="order_id"
          bordered
          columns={columns}
          dataSource={data}
          pagination={false}
          loading={loading}
        />

        <Pagination
          total={total}
          current={queryInfo.pagenum}
          pageSize={queryInfo.pagesize}
          showSizeChanger
          showTotal={showTotal}
          onChange={handlePagination}
        />
      </Card>

      <EditOrders
        visible={isEditOrders}
        orderInfo={orderInfo}
        onHide={hideEditOrders}
      />

      <EditAddress
        visible={isEditAddress}
        orderInfo={orderInfo}
        onHide={hideEditAddress}
      />

      <ShowLogistics
        visible={isLog}
        onHide={hideShowLog}
      />
    </>
  )
}

export default OrdersList